<template>
    <custom-page-box>
        <div class='personnel-manage-container'>
            <div class='left'>
                <personnel-tree @getTable='clickNode'></personnel-tree>
            </div>
            <div class="w10"></div>
            <div class='right'>
                <div class="right-top">
                    <div class='search-box'>
                        <a-input class='search-input' v-model='keyword' @keyup.enter.native='searchTable' @blur='searchTable' allow-clear placeholder='搜索手机号、姓名'></a-input>
                        <a-button @click='toAdd'>添加成员</a-button>
                    </div>
                    <div class='table'>
                        <a-table
                            :data-source="tableData"
                            rowKey='id'
                            :pagination='false'
                            :scroll='{ x: width, y: height }'
                        >
                            <a-table-column
                                key="x"
                                title="序号"
                                width='60px'
                            >
                                <template slot-scope="text, record, index">
                                    <span>{{ (pageIndex - 1) * pageSize + index + 1 }}</span>
                                </template>
                            </a-table-column>
                            <a-table-column
                                key="name"
                                title="姓名"
                                data-index="name"
                                width='80px'
                                :ellipsis='true'
                            />
                            <a-table-column
                                key="departmentName"
                                title="部门"
                                data-index="departmentName"
                                width='100px'
                                :ellipsis='true'
                            />
                            <a-table-column
                                key="position"
                                title="职位"
                                data-index="position"
                                width='100px'
                                :ellipsis='true'
                            />
                            <a-table-column
                                key="tel"
                                title="联系电话"
                                data-index="tel"
                                width='110px'
                                :ellipsis='true'
                            />
                            <a-table-column
                                key="status"
                                title="状态"
                                data-index="status"
                                width='60px'
                                :ellipsis='true'
                            >
                                <template slot-scope="text, record">
                                    <span>{{ record.status === 1 ? '正常' : '冻结' }}</span>
                                </template>
                            </a-table-column>
                            <a-table-column
                                key="c"
                                title="操作"
                                width='220px'
                            >
                                <template slot-scope="text, record, index">
                                    <a-button class="blue" @click='resetPassword(text, record, index)'>重置密码</a-button>
                                    <a-button class="orange" @click='updateState(text)' v-if='record.status === 1'>冻结</a-button>
                                    <a-button class="orange" @click='updateState(text)' v-else>解除冻结</a-button>
                                    <a-button class="green" @click='toEdit(text)'>编辑</a-button>
                                    <a-button class="red" @click='deletePerson(text)'>删除</a-button>
                                </template>
                            </a-table-column>
                        </a-table>
                    </div>
                </div>
                <custom-pagination :total="Number(total)" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="getTable"></custom-pagination>
            </div>
            <a-modal
                title="重置密码"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="handleOk"
                @cancel="handleCancel"
            >
                <a-form-model
                    ref="ruleForm"
                    :model="form"
                    :rules="rules"
                >
                    <a-form-model-item label='新密码' prop='newPassword'>
                        <a-input v-model='form.newPassword' type="password" @keyup.enter.native='handleOk'></a-input>
                    </a-form-model-item>
                </a-form-model>
            </a-modal>
        </div>
    </custom-page-box>
</template>

<script>
import PersonnelTree from '@/components/personnel-manage/tree'
export default {
    name: 'PersonnelManageIndex',
    components: {
        PersonnelTree
    },
    data () {
        const checkPassword = (value) => {
            const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/
            return reg.test(value)
        }
        const customCheckPassword = (rule, value, callback) => {
            if (!checkPassword(value)) {
                callback(new Error('请设置6~12位数字字母组合新密码'))
            } else {
                callback()
            }
        }
        return {
            keyword: '',
            tableData: [],
            total: 0,
            pageIndex: 1,
            pageSize: 10,
            currentNode: {},
            width: 1000,
            height: 500,
            visible: false,
            confirmLoading: false,
            form: {
                newPassword: ''
            },
            rules: {
                newPassword: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { validator: customCheckPassword, trigger: 'change' }
                ]
            },
            nowNode: {}
        }
    },
    mounted () {
        const arr = document.getElementsByClassName('table')
        if (arr[0]) {
            this.width = arr[0].offsetWidth - 17
            this.height = arr[0].offsetHeight - 59 + 17
        }
    },
    methods: {
        clickNode (data) {
            this.currentNode = data
            this.pageIndex = 1
            this.getTable()
        },
        searchTable () {
            this.pageIndex = 1
            this.getTable()
        },
        async getTable () {
            const res = await this.$ApiServer['personnel/getTable']({
                currentPage: this.pageIndex,
                pageSize: this.pageSize,
                departmentId: this.currentNode.id,
                keyword: this.keyword
            })
            if (res.code === 200) {
                this.tableData = res.data.records || []
                this.total = res.data.total
            } else {
                this.$message.error(res.message)
            }
        },
        toAdd () {
            this.$router.push({
                path: '/personnel-manage/update',
                query: {
                    departmentId: this.currentNode.id
                }
            })
        },
        toEdit (item) {
            this.$router.push({
                path: '/personnel-manage/update',
                query: {
                    departmentId: item.departmentId,
                    name: item.name,
                    position: item.position,
                    tel: item.tel,
                    id: item.id
                }
            })
        },
        resetPassword (text) {
            this.nowNode = text
            this.visible = true
        },
        deletePerson (data) {
            this.$confirm({
                title: '提示',
                content: `确认是否删除人员[${data.name}]`,
                okText: '确认',
                cancelText: '取消',
                onOk: async () => {
                    const res = await this.$ApiServer['personnel/deletePerson']([data.id])
                    if (res.code === 200) {
                        this.getTable()
                        this.$message.success(res.message)
                    } else {
                        this.$message.error(res.message)
                    }
                },
                onCancel () {}
            })
        },
        updateState (item) {
            if (item.status === 1) {
                this.$confirm({
                    title: '提示',
                    content: `确认是否冻结人员[${item.name}]`,
                    okText: '确认',
                    cancelText: '取消',
                    onOk: () => {
                        this.toUpdate(item)
                    },
                    onCancel () {}
                })
            } else {
                this.toUpdate(item)
            }
        },
        async toUpdate (item) {
            const res = await this.$ApiServer['personnel/updateState']({
                userId: item.id
            })
            if (res.code === 200) {
                this.$message.success('操作成功')
                this.getTable()
            } else {
                this.$message.error(res.message)
            }
        },
        handleOk () {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    this.confirmLoading = true
                    const res = await this.$ApiServer['personnel/reset/password']({
                        userId: this.nowNode.id,
                        newPassword: this.form.newPassword
                    })
                    if (res.code === 200) {
                        this.$message.success(res.message)
                        this.visible = false
                        this.confirmLoading = false
                    } else {
                        this.confirmLoading = false
                        this.$message.error(res.message)
                    }
                }
            })
        },
        handleCancel () {
            this.$refs.ruleForm.resetFields()
            this.nowNode = {}
            this.visible = false
        }
    }
}
</script>

<style scoped lang='less'>
.personnel-manage-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    .left {
        width: 300px;
        padding: 0 10px;
        background: #fff;
        height: 100%;
        border-radius: 6px;
    }
    .right {
        flex: 1;
        height: 100%;
        .search-box {
            display: flex;
            justify-content: flex-start;
            background: #fff;
            height: 50px;
            align-items: center;
            padding-left: 20px;
            border: 1px solid #E3E3E3;
            margin-bottom: 10px;
            .search-input {
                width: 200px;
            }
            button {
                background: @primary-color;
                color: #fff;
                margin-left: 30px;
            }
        }
        .table {
            margin-bottom: 10px;
            height: calc(100vh - 60px - 10px  - 70px - 10px  - 10px - 50px);
            background: #fff;
        }
    }
}
.w10{
  width: 10px;
  height: 100%;
  background-color: transparent;
}
.right-top{
   padding: 10px 21px 0;
  border-radius: 6px;
  background-color: #fff;
  margin-bottom: 10px;
}
</style>
